<template>
    <div>
        <form>
          <label class="block">
            <span class="block text-sm font-medium text-slate-700">homeworkName</span>
            <input type="text" class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
              focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
              disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
              invalid:border-pink-500 invalid:text-pink-600
              focus:invalid:border-pink-500 focus:invalid:ring-pink-500
            "/>
          </label>
          <label class="block">
            <span class="block text-sm font-medium text-slate-700">content</span>
            <mavon-editor v-model="content" :defaultOpen="preview" :subfield="false"/>
          </label>
        </form>
        <button v-on:click="saveHomework()"></button>
    </div>
</template>

<script>
import HomeworkService from '@/services/HomeworkService';

export default {
    name: 'AddCourse',
    props: {
        // id,
        // courseId,
    },
    data() {
        return {
            homeworkName: '',
            content: 'homework content',
        };
    },
    created() {
        // initContent();
    },
    methods: {
        async saveHomework() {
            console.log('in saveHomework');
            if (this.homeworkName !== '') {
                const data = {
                    name: this.homeworkName,
                    uploader: this.$store.state.user.id,
                    content: this.content,
                };
                const res = await HomeworkService.submitHomework(data);
                console.log(res);
            }
        },
        async initContent() {
            // TODO fetch exist content
        }
    },
};
</script>
